<template>
  <div class="viewShed">
    <div class="viewShed-top">
      <span>
        视域分析
      </span>
      <el-popover
          class="viewShed-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中选择视点位置，然后再次点击鼠标左键选择分析方向即可">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="viewShed-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="viewShed-data">
      <el-form ref="viewShedData" :model="viewShedObj" label-width="140px">
        <el-form-item label="横向视角">
          <el-input-number v-model="viewShedObj.fov_h" :step="1" :min="1" :max="150"></el-input-number>
        </el-form-item>
        <el-form-item label="纵向视角">
          <el-input-number v-model="viewShedObj.fov_v" :step="1" :min="1" :max="150"></el-input-number>
        </el-form-item>
        <el-form-item label="视点高度">
          <el-input-number v-model="viewShedObj.height" :step="1" :min="0" :max="20"></el-input-number>
        </el-form-item>
        <el-form-item label="可见区域颜色" class="color">
          <el-color-picker color-format="rgb" v-model="viewShedObj.visibleColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="不可见区域颜色" class="color">
          <el-color-picker color-format="rgb" v-model="viewShedObj.invisibleColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="是否交互锁定">
          <el-switch v-model="viewShedObj.interactiveLock"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="viewShed-btn">
      <el-button @click="selectViewShed()">选择区域</el-button>
      <el-button @click="delViewShed()">删除</el-button>
      <el-button @click="closeViewShed()">关闭</el-button>
      <el-button @click="saveViewShed()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/viewShed';
</style>
<script>
/* eslint-disable */

export default {
  name: "viewShed",
  data() {
    return {
      viewShedObj: {
        //横向视角，取值范围：[1°~150°]，默认值：60
        fov_h: 60,
        //纵向视角，取值范围：[1°~150°]，默认值：30
        fov_v: 30,
        //视点高度（距离场景交互所拾取点的高度），默认值：0
        height: 0,
        //可见区域的颜色
        visibleColor: 'rgb(241,9,9)',
        //不可见区域的颜色
        invisibleColor: 'rgb(65,243,4)',
        //是否开启交互锁定，默认值：false
        interactiveLock: false,
      },
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectViewShed() {
      this.$emit('select-viewShed');
      let visibleColor = this.extractRGBComponents(this.viewShedObj.visibleColor)
      let invisibleColor = this.extractRGBComponents(this.viewShedObj.invisibleColor)
      let obj = {
        fov_h: this.viewShedObj.fov_h,
        fov_v: this.viewShedObj.fov_v,
        height: this.viewShedObj.height,
        visibleColor: visibleColor,
        invisibleColor: invisibleColor,
        interactiveLock: this.viewShedObj.interactiveLock,
      }
      __g.tools.startViewshedAnalysis(obj);
    },
    delViewShed() {
      __g.tools.stopViewshedAnalysis();
    },
    closeViewShed() {
      this.$emit('close-popup');
      this.reloadViewShed()
    },
    reloadViewShed() {
      this.viewShedObj = {
        fov_h: 60,
        fov_v: 30,
        height: 0,
        visibleColor: 'rgb(241,9,9)',
        invisibleColor: 'rgb(65,243,4)',
        interactiveLock: false,
      }
    },
    saveViewShed() {
      this.$message.success("开发中")
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadViewShed()
  },
};
</script>